iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0
Modern Web

拾起 Canvas,人人都是大藝術家!系列 第 28

第 28 幅 - Canvas 集大成,人生大事邀請函(2)放上小遊戲與設定觸發條件

  • 分享至 

  • xImage
  •  

今天的目標也很簡單,就是拿我們之前做的 Pokemon 小遊戲繼續開發下去,目標就是先讓這個邀請函有個基本的雛形!可以拆成以下幾個步驟,一步步完成。

1. 簡易的卡片雛形

https://ithelp.ithome.com.tw/upload/images/20221013/20130630ayXYTQXb6Z.png

<body>
    <div id="wrapper">
		<div id="titleWrapper">
            <div id="title">Welcome To Our #如蕉似漆  Wedding!</div>
			<div id="title">Go and get some bananas!</div>
		</div>
		<canvas id="canvas" width="600" height="600"></canvas>
	</div>
</body>

2. 複用之前的遊戲,調整 drawImage() 尺寸

接著一樣讓玩家可以去吃香蕉累積分數,只是配合我們的卡片尺寸去使用 drawImage() 的 api 改變遊戲各個圖片的尺寸,這樣畫面看起來就和諧許多。

想複習之前的復刻 Pokemon go 程式碼可以參考這篇:https://ithelp.ithome.com.tw/articles/10306228

function assetsLoaded() {
        ctx.drawImage(gameMap, 0, 0, 700,700);
        ctx.drawImage(
            itemImage, 
            bananaItem.spritePosition*bananaItem.spriteItemDistance, 
            0, 
            zoom, 
            zoom, 
            bananaItem.x * zoom, 
            bananaItem.y * zoom, 
            zoom, 
            zoom
        );
        ctx.drawImage(
            playerImage, 
            player.direction[player.currentDirection].x, 
            player.direction[player.currentDirection].y, 
            zoom-2, 
            zoom, 
            player.x * zoom, 
            player.y * zoom, 
            30, 
            30
        );
        if (!initialed) {
            bananaItem.generatePosition();
            initialed = true;
        }
        board();
    }

3. 加上觸發條件

最後當分數累積到五分時就會跳出 Alert,這個 Alert 也是我們要串接昨天完成的表單的地方,之後會以 pop up modal 的形式去完成表單的彈出與表單資料的提交(也就是填寫我要出席婚禮的回覆方式唷~)

https://ithelp.ithome.com.tw/upload/images/20221013/20130630GEwDeHtNk5.png

function board() {
        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
        ctx.fillRect(CanvasWidth-120, CanvasHeight-50, 120, 50);

        ctx.font = "16px Arial";
        ctx.fillStyle = "rgba(255, 255, 255, 1)";
        ctx.fillText("My Score",CanvasWidth-100, CanvasHeight-30);

        ctx.font = "18px Arial";
        ctx.fillStyle = "rgba(255, 255, 255, 1)";
        ctx.fillText(score,CanvasWidth-65, CanvasHeight-7);
        if (score > 5 ){
            alert("表單出現")
        }
    }

以上就是今天的目標,我們明天繼續完成表單的串接,並且逐步美化他吧!
明天要 Sprint Demo 還沒寫完的程式圓心已累...晚安 zzz


上一篇
第 27 幅 - Canvas 集大成,人生大事邀請函(1)自己做表單串接 Google App Script
下一篇
第 29 幅 - Canvas 集大成,人生大事邀請函(3)集滿分數,送出表單!
系列文
拾起 Canvas,人人都是大藝術家!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Rson Wilson
iT邦新手 4 級 ‧ 2022-10-14 00:07:35

辛苦幫推推~ 就快完賽了,一起撐下去!

我要留言

立即登入留言